import VueRouter from 'vue-router';
import Vue from 'vue';
import { getCookie } from '@/utils/cookie';
import { Notification } from 'element-ui';
import _ from 'lodash';
import { menuConfig } from './menuConfig';
import store from '@/store';
import { set_breadcrumb_list } from '@/store/mutations-types';
// 路由懒加载
const EnterHome = () => import('@/views/login/EnterHome');
const Home = () => import('@/views/homepage/index');
Vue.use(VueRouter);

const cook = getCookie();

const Routes = renderRoutes(menuConfig, cook.username);

const routes = [
  {
    path: '/login',
    name: 'login',
    component: EnterHome,
  },
  {
    path: '/',
    name: 'Home',
    component: Home,
    // redirect: (!_.isEmpty(Routes) && Routes[0].path) || '/',
    // children: Routes,
  },
];
// 递归生成,并且通过当前权限 生成路由规则
// lodash中的方法
// .compact去除集合中的假值   [1,2,false]  [1,2]
// .flattenDeep 将多维数组 变成一维数组
// 用map将当前数组映射为一个新的数组 会生成对应的路由规则
function renderRoutes(data, role) {
  return _.compact(
    _.flattenDeep(
      _.map(data, (item, key) => {
        if (item.children && item.children.length > 0) {
          return renderRoutes(item.children, role);
        }

        if (item.roles.indexOf(role) !== -1) {
          return {
            path: item.path,
            meta: item.meta || {}, // 自定义信息
            component: item.component,
          };
        }
        return null;
      })
    )
  );
}

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});
// 当前导航与父级导航 生成面包屑
const getRoute = (path, config) => {
  return _.compact(
    _.map(config, (item, key) => {
      // 过滤器筛选出来 与当前path 相同的 path
      const c = _.filter(item.children || [], (o) => '/' + o.path === path);
      // 判断 有没有children 并且不能为空 并且  与当前path 的 path相同
      if (item.children && !_.isEmpty(item.children) && !_.isEmpty(c)) {
        return {
          ...item,
          children: c,
        };
      }
      if ('/' + item.path === path) {
        return item;
      }
    })
  );
};

/**
 * @fun 在路由跳转前触发的守卫
 * @param to:要去的地方
 * @param from：从哪来
 * @param next：Fn  继续跳转
 * **/
let is_init = false;

router.beforeEach((to, from, next) => {
  const cook = getCookie();
  // 判断cookie 中有没有登录的 username
  // 如果已经登录直接进入主页 并且不能在返回登录页
  if (cook.username) {
    if (to.name === 'login') {
      next('/');
    } else {
      // 调用vuex 中的方法修改 其中的数据 来生成面包屑
      store.commit(set_breadcrumb_list, getRoute(to.path, menuConfig));
      // 根据当前登录的权限，动态添加路由规则
      // 并且下列添加的路由规则只会执行一次 通过!is_init
      const Routes = renderRoutes(menuConfig, cook.username);
      if (!_.isEmpty(Routes) && !is_init) {
        is_init = true;
        _.forEach(Routes, (item) => {
          // 动态添加路由
          // 第一个参数为 父级路由的名称
          // 第二个参数为路由规则
          router.addRoute('Home', item);
        });
        // 用三元运算符判断 如果当前没有path就进入主页
        next({ path: to.name === 'Home' ? Routes[0].path : to.path, replace: true });
      }
    }
  } else {
    // 如果cookie中的usename没了 就让跳转登录页
    if (to.name !== 'login') {
      Notification({
        title: '失败',
        message: '登陆已过期，请重新登录',
        type: 'error',
      });
      next('/login');
    }
  }

  next();
});

export default router;
